﻿<template>
	<!-- 搜索组件宽度自适应于外层 -->
	<view
		class="padding-10 margin-10 bg-white"
		v-bind:class="asData.parameters.style"
	>
		<u-toast ref="uToast"></u-toast>
		<u-search 
			:placeholder="asData.parameters.keywords" 
			v-model="keyword" 
			shape="square" 
			:show-action="true"
			action-text="搜索" 
			@custom="goSearch" 
			@search="goSearch"
		>
		</u-search>
	</view>
</template>
<script>
	export default {
		name: "Search",
		props: {
			asData: {
				required: true,
			}
		},
		data() {
			return {
				keyword: '',
				searchTop: 0,
				scrollTop: 0,
				searchFixed: this.$store.state.searchFixed || false,
			};
		},
		created() {
			this.searchStyle()
		},
		methods: {
			searchStyle() {
				this.$store.commit('searchStyle', this.asData.parameters.style)
			},
			change(value) {
				// 搜索框内容变化时，会触发此事件，value值为输入框的内容
				//console.log(value);
			},
			goSearch() {
				if (this.keyword != '') {
					this.$u.route('/pages/category/list/list?key=' + this.keyword);
				} else {
					this.$refs.uToast.show({
						message: '请输入查询关键字',
						type: 'warning',
					})
				}
			},
			handleScroll() {
				this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				this.scrollTop >= this.searchTop ? this.searchFixed = true : this.searchFixed = false;
			},
		},
	}
</script>